<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="mobile-agent" content="format==[html5];url=https://y.qq.com/m/index.html">
    <meta name="applicable-device" content="pc">
	<title>豆咖音乐-评论界面</title>
<script type="text/javascript">
</script>

<link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/layout_0412.css?max_age=25920000&amp;v=20190312">
<link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/song_detail.css?max_age=2592000&amp;v=20180803">
<link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/popup_login.css?max_age=25920000">
<link rel="stylesheet" type="text/css" href="//stdl.qq.com/stdl/qqbrowser/floatlayer/css/qb-ie-remind.css?1592630942332">
<link rel="stylesheet" href="assets/css/reset.css">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/slider.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/HBSlider.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/auth.css">
	<script src="js/auth.js"></script>
	<script src="js/jquery-3.5.1.js"></script>
	<style>
		.pictureSize{
	  		width:45px;
	  		height:45px;
	  		border: 1px solid white;
	  		border-radius: 30px;
	  		margin-top:5px;
  		}
  		.commen_list{
	  		text-align: left;
	  	}
	  	.selectItem{
	  		background-color: #B72712;
	  		color: white;
	  	}
	  	.main {
		    width: 100%;
		    float: left;
		    margin-left: 100px;
		    box-sizing: border-box;
		}
		.detail_layout__other{
			position: absolute;
			right: 450px;
		}
		.mod_comment{
			width:750px
		}
		h1,h2,h3,h4 a{
			color: black;
		}
		body {
		    text-align: left; 
		}
		p {
		    margin: 0 0 0em 0;
		}
		.pictureSize{
		  	width:45px;
		  	height:45px;
		  	border: 1px solid white;
		  	border-radius: 30px;
		  	margin-top:5px;
  		}
  		.mod_page_nav {
		    font-size: 16px;
		}
		.mod_btn{
		    border-radius: 2px;
		    font-size: 14px;
		    margin-right: 6px;
		    padding: 0 23px;
		    height: 20px; 
		    line-height: 20px; 
		    display: inline-block;
		    white-space: nowrap;
		    box-sizing: border-box;
		    overflow: hidden;
		    margin-left:10px;
		    border: none;
		    background-color:#fbfbfb;
		    color:bule;
		}
		
	</style>
      
</head>
<body class="os_mac">
<!-- 头部 S -->
<div class="mod_header">
        <header>
			<div class="container">
				<div class="navbar-header">
					<a href="" class="navbar-brand">
						<img src="assets/images/logo.png" alt="">
					</a>
				</div>
				<nav>
					<ul class="nav navbar-nav navbar-link" style="display: block;">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="#">我的音乐</a>
						</li>
						<li>
							<a href="#">歌手</a>
						</li>
						<li>
							<a href="#">排行榜</a>
						</li>
						<li>
							<a href="#">会员中心</a>
						</li>
						<li>
							<a href="#">歌曲广场</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right navbar-sm" style="display: block;">
						<li><input type="text" class="search-input" placeholder="歌名 / 歌手"></li>
						<li>
							<a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
						</li>
						<li id="loginItem">
							<a href="register_login.jsp">注册 / 登录</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>
    </div>
    
    <!-- 头部 E -->

	<div class="main">
		<div class="mod_data" style="display:;">
		    <span class="data__cover">
			
				<img src="//y.gtimg.cn/music/photo_new/T002R300x300M000003ClOrj1VP7eg_1.jpg?max_age=2592000" class="data__photo" id="songPicture">
			
		    </span>
		    <div class="data__cont">
			<div class="data__name">
			    <h1 class="data__name_txt" id="songName">那个男孩</h1>
			</div>
			<div class="data__singer" title="汪苏泷">
			    <i class="icon_singer sprite"></i>
				<a href="#" class="data__singer_txt js_singer" id="singerName">未获取信息</a>
				<input type="hidden" id="singerId">
			</div>
			
			<ul class="data__info">
			
			    <li class="data_info__item js_lan" id="singerArea">地区：国语</li>
			    <li class="data_info__item js_genre data_info__item--even" id="songType">类型：Pop</li>
				<li class="data_info__item js_public_time data_info__item--even" id="publishTime">发布时间：2020-06-15</li>
			</ul>
			<div class="data__actions" role="toolbar">
			    <a href="#" class="mod_btn_green js_all_play" id="playSong">
			    	<i class="mod_btn_green__icon_play"></i>播放</a>
			    <a href="javascript:;" class="mod_btn js_all_like collectBtn"><i class="mod_btn__icon_like collectTag"></i><span id="collectFont">收藏</span></a>
			    <a class="mod_btn js_into_comment" href="#comment_box"><i class="mod_btn__icon_comment"></i>评论</a>
			</div>
		    </div>
		</div>
			
		<div class="detail_layout">
		    <div class="detail_layout__main">
				<!--歌词_S-->			
			<div class="mod_lyric">
			    <input id="copy_content" style="display:none;">
			    <div class="lyric__hd">
				<h2 class="lyric__tit">歌词</h2>
			    </div>
			    <div class="lyric__cont">
				<div class="lyric__cont_box" id="lrc_content">
					<div class="aplayer-lrc">
						<ul id="lrclist" class="aplayer-lrc-contents" style="transform: translateY(0px);"><!-- 保证歌词在正中间 -->
						</ul>
					</div>
				</div>
				<a href="javascript:;" class="c_tx_highlight js_open_lyric">[收起]</a>
			    </div>
			</div>
				<!--歌词_E-->
		    <div class="mod_comment" id="comment_box"><div class="part__hd">
        <h2 class="part__tit">评论:</h2>
    </div>
<div class="mod_comment js_cmt_input">

<div class="comment__input">
	<div class="comment__textarea js_comment__textarea  c_bg_normal">
		<div class="comment__textarea_inner">
			<!--c_tx_normal-->
             <!--focus评论框的时候将.comment__textarea_default模块隐藏，同时显示.comment__textarea_input-->
             <div class="js_reply_text comment__textarea_input c_tx_normal" id="reply_text" contenteditable="true"></div>
		</div>
		<!--字数超过后添加comment__tips--warn_tx 去掉c_tx_thin-->
		<div class="comment__tips js_comment_tips c_tx_thin">不能超过<span class="c_tx_highlight">100</span>字</div>
	</div>
        <div class="comment__tool">
        <a href="javascript:;" class="mod_btn_green comment__tool_btn js_send_reply" id="sendComment">发表评论</a></div>
	
</div>
</div>

<div class="mod_all_comment js_mod_all">
	<div class="comment_type__title c_b_normal">
	    <h2 class="comment_new_count allComment">最新评论(0)</h2>
	</div>
<ul class="comment__list js_all_list" id="commentList">
	<li class="comment__list_item c_b_normal js_cmt_li ">
	    <a href="javascript:;" class="comment__avatar js_nick" data-uin="owokNenq7KvAon**">
	        <img class="js_lazy_comment_pic" src="">
	    </a>
	<h4 class="comment__title"><a href="javascript:;" class="c_tx_thin js_nick js_nick_only" data-uin="owokNenq7KvAon**">画风</a>
	</h4>
	<p class="c_tx_normal comment__text js_hot_text">这首歌旧版还躺在我的本地音乐里</p>
	<div class="comment__opt js_comment_opt" data-commentid="song_268760037_2358095420_1592630786">
	    <span class="comment__date c_tx_thin">13:26</span>
	</div>
	<div class="js_reply_container"></div>
	</li>

</ul>
    <div class="mod_page_nav js_pager_comment" id="pageList">
    	<a href="javascript:;" class="js_pageindex current">1</a>
    	<!-- <strong class="more">...</strong> -->
    	<a href="javascript:;" class="next js_pageindex" title="下一页">
    	<span>&gt;</span></a><span id="pagesDetail">共页</span>
    </div>
    
</div>
</div>
		    </div>
		    <div class="detail_layout__other">
			<div class="mod_about" id="album_desc" style="display:none;">
			<h3 class="about__tit">简介</h3>
			    <div class="about__cont"></div>
			    <a href="javascript:;" class="about__more" data-stat="y_new.song.moreinfo" data-left="0" data-top="-185" data-target="popup_data_detail" style="display: none;">[更多]</a>
			</div>
			<div class="other_part" id="song_mv">
			</div>
		    </div>
				
		</div>
        <div class="popup_data_detail" id="popup_data_detail" style="display:none;">
            <div class="popup_data_detail__cont"><h3 class="popup_data_detail__tit">专辑简介</h3><p></p></div>
            <i class="popup_data_detail__arrow"></i>
        </div>
    </div> 
			
	<div class="mod_operate_menu" id="menu_menu" data-aria="popup" style="display:none;">
            <div class="operate_menu__cont">
                <ul role="menu" class="operate_menu__list">
                    <li class="operate_menu__item">
                         <a href="javascript:;" class="operate_menu__link js_all_fav" data-target="menu_add"><i class="operate_menu__icon_add sprite"></i>添加到<i class="operate_menu__icon_arrow"></i></a>
                    </li>
                    <li class="operate_menu__item">
                         <a href="javascript:;" class="operate_menu__link js_all_share" data-target="menu_share"><i class="operate_menu__icon_share sprite"></i>分享<i class="operate_menu__icon_arrow"></i></a>
                    </li>
                    <li class="operate_menu__item">
                         <a href="javascript:;" class="operate_menu__link js_all_down"><i class="operate_menu__icon_down sprite"></i>下载</a>
                    </li>
                </ul>
            </div>
        </div>
			
<script type="text/javascript"> 
/* var loginAccount = "${sessionScope.loginAccount}"; */
/* var accountId = "${sessionScope.loginAccount.accountId}"; */
/* var accountTel = "${sessionScope.loginAccount.accountTel}"; */
	var songId = "${param.songId}";
	/* var songId = 6 ; */
	var accountId = 10;
	var accountTel = "17519485014";
	var loginAccount = {
		accountId : "10",
		accountTel : "17519485014",
		accountPwd : "123456",
		accountPicture : null,
		vipStatus : "0"
	}; 
	
	$(document).ready(function(){
		
		if (loginAccount != "") {
			$("#loginItem").empty();
			$("#loginItem").append("<img id=\"faceImg\" class=\"pictureSize\" src=\"${pageContext.request.contextPath}/front/img/adminpicture.jpg\"/>");
			//页面显示该歌曲所有评论内容
			sendAjax(1);
			
			//页面进来加载歌曲信息
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/CommentServlet",
				type:"post",
				data:{op:"getSongDetail",songId:songId},
				dataType:"json",
				success:function(result,status,xhr){
						if (result.singer.singerPicture==null) {
							$("#songPicture").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/singerpic.jpg");
						} else {
							$("#songPicture").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/"+result.singer.singerPicture);
						}
						$("#songName").text(result.songName)
						$("#singerId").val(result.singer.singerId);
						$("#singerName").text(result.singer.singerName);
						$("#singerArea").text("地区 ： "+result.singer.area.areaName);
						$("#songType").text("类型 ： "+result.songType.typeName);
						$("#publishTime").text("发行时间 ："+result.publishDate);
						getLRC(result.songText);
				},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
		}
		
		//判断歌曲是否已被用户收藏
		existCollect();
	})
	
	//页面获取评论列表的ajax
	function sendAjax(pageNum) {
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/CommentServlet",
			type:"post",
			data:{op:"getCommentList",songId:songId,pageNum:pageNum,pageSize:"3"},
			dataType:"json",
			success:function(result,status,xhr){
				$("#pageList").empty();
				$("#commentList").empty();
				if (result.data=="") {
						$(".allComment").text("最新评论(0)");
						$("#commentList").append("<li class=\"comment__list_item c_b_normal js_cmt_li\">"+
										" <p class=\"c_tx_normal comment__text js_hot_text\" style=\"text-align:left\">暂无评论</p></li>");
						//总页数和下一页追加
						$("#pageList").append("第<span id=\"pagesTotal\" >1</span>页&nbsp&nbsp"+
											" 共<span id=\"pagesDetail\" >1</span>页");
						}else {
							$(".allComment").text("最新评论("+result.total+")");
							for (var i = 0; i < result.data.length; i++) {
								var commentTime = (result.data[i].commentTime).substring(0,19);
								$("#commentList").append("<li class=\"comment__list_item c_b_normal js_cmt_li\">"+
									    " <a href=\"javascript:;\" class=\"comment__avatar js_nick\">"+
									    " <img class=\"js_lazy_comment_pic\" src=\"\"></a><h4 class=\"comment__title\">"+
									    " <input type=\"hidden\" class=\"beFansId\" value="+result.data[i].account.accountId+">"+
									    " <a href=\"javascript:;\" class=\"c_tx_thin js_nick js_nick_only\">"+result.data[i].account.accountTel+"</a>"+
									    " <button class=\"mod_btn mod_profile__btn_focus js_follow_user attentioinAccount\">关注</button></h4>"+
										" <p class=\"c_tx_normal comment__text js_hot_text\">"+result.data[i].commentContent+"</p>"+
										" <div class=\"comment__opt js_comment_opt\">"+
									    " <span class=\"comment__date c_tx_thin\">"+commentTime+"</span></div>"+
										" <div class=\"js_reply_container\"></div></li>")
						}
							//分页追加
							for (var i = 1; i <= result.pages; i++) {
								if (i==result.pageNum) {
									if (i==1) {
										$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
									}else {
										$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
									}
								}else {
									$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex pageButton\">"+i+"</a>");
								}
							}
							//总页数和下一页追加
							$("#pageList").append("<a href=\"javascript:;\" class=\"next js_pageindex nextPage\"><span>&gt;</span></a>"+
												" 第<span id=\"pagesTotal\" >"+result.pageNum+"</span>页&nbsp&nbsp"+
												" 共<span id=\"pagesDetail\" >"+result.pages+"</span>页");
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	}
	
	//点击歌手名跳转到歌手信息页面
	$("#singerName").click(function(){
		var singerId = $("#singerId").val();
		window.open("${pageContext.request.contextPath}/front/singer_personal_page.jsp?singerId="+singerId);
	})
	
	//判断是否被收藏过的方法
	function existCollect() {
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/CommentServlet",
			type:"post",
			data:{op:"existCollect",songId:songId,accountId:accountId},
			dataType:"text",
			success:function(result,status,xhr){
					if ("yes"==result) {
						$(".collectTag").addClass("mod_btn__icon_like--like");
						$("#collectFont").text("已收藏");
					}else if ("no"==result) {
						$(".collectTag").removeClass("mod_btn__icon_like--like");
						$("#collectFont").text("收藏");
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	}
	
	//对页码做点击事件
	$(document).on("click",".pageButton",function(){
		var nowPage = $(this).text();
			sendAjax(nowPage);
			$("#pagesTotal").text(nowPage);
	})
	
	//下一页按钮
		$(document).on("click",".nextPage",function(){
		var nowPage = $("#pagesTotal").text();
		var maxPage = $("#pagesDetail").text();
		if (nowPage<maxPage) {
			sendAjax(nowPage*1+1);
			$("#pagesTotal").text(nowPage*1+1);
		}
	})
	
	//播放按钮(点击播放添加到播放列表并跳转到播放页面)
	$("#playSong").click(function(){
		
		//判断是否已添加到该用户的播放列表
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/PlayListServlet",
			type:"post",
			data:{op:"existPlayList",songId:songId,accountId:accountId},
			dataType:"text",
			success:function(result,status,xhr){
				//未添加到播放列表
				if ("yesPlay"!=result) {
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/PlayListServlet",
						type:"post",
						data:{op:"addPlayList",songId:songId,accountId:accountId},
						dataType:"text",
						success:function(result,status,xhr){
							if ("addyes"==result) {
									alert("添加到播放列表成功")
									window.open("${pageContext.request.contextPath}/front/play.jsp?songId="+songId);
							}else if ("addno"==result) {
									alert("添加到播放列表失败");
								}
							},
							error:function(xhr,status,error){
								alert("ajax异步请求失败");
							}
						});
					}else if ("yesPlay"==result) {
						window.open("${pageContext.request.contextPath}/front/play.jsp?songId="+songId);
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	})
	
	
	//收藏按钮
	$(".collectBtn").click(function(){
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/CommentServlet",
			type:"post",
			data:{op:"existCollect",songId:songId,accountId:accountId},
			dataType:"text",
			success:function(result,status,xhr){
					if ("yes"==result) {
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/CommentServlet",
							type:"post",
							data:{op:"deleteCollect",songId:songId,accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
									if ("yes"==result) {
										alert("取消收藏成功");	
										$(".collectTag").removeClass("mod_btn__icon_like--like");
										$("#collectFont").text("收藏");
									}else if ("no"==result) {
										alert("取消收藏失败");	
										$(".collectTag").addClass("mod_btn__icon_like--like");
										$("#collectFont").text("已收藏");
									}
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败");
								}
							});
					}else if ("no"==result) {
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/CommentServlet",
							type:"post",
							data:{op:"addCollect",songId:songId,accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
									if ("yes"==result) {
										alert("收藏成功");	
										$(".collectTag").addClass("mod_btn__icon_like--like");
										$("#collectFont").text("已收藏");
									}else if ("no"==result) {
										alert("收藏失败");	
										$(".collectTag").removeClass("mod_btn__icon_like--like");
										$("#collectFont").text("收藏");
									}
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败");
								}
							});
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	})
	
	//发表评论
	$("#sendComment").click(function(){
		var reply_text = $("#reply_text").text();
		if (reply_text=="") {
			alert("评论内容不能为空");
		}else {
			
			var now = new Date();
			var year = now.getFullYear();
			var month = now.getMonth()+1;
			var date = now.getDate();
			var h = now.getHours();
			h = timeChange(h);
			var m = now.getMinutes();
			m = timeChange(m);
			var s = now.getSeconds();
			s = timeChange(s);
			var nowTime = year+"-"+month+"-"+date+" "+h+":"+m+":"+s;
			
			$("#commentList").prepend("<li class=\"comment__list_item c_b_normal js_cmt_li\">"+
					    " <a href=\"javascript:;\" class=\"comment__avatar js_nick\">"+
					    " <img class=\"js_lazy_comment_pic\" src=\"\"></a><h4 class=\"comment__title\">"+
					    " <a href=\"javascript:;\" class=\"c_tx_thin js_nick js_nick_only\">"+accountTel+"</a></h4>"+
						" <p class=\"c_tx_normal comment__text js_hot_text\">"+reply_text+"</p>"+
						" <div class=\"comment__opt js_comment_opt\">"+
					    " <span class=\"comment__date c_tx_thin\">"+nowTime+"</span></div>"+
						" <div class=\"js_reply_container\"></div></li>")
			//构建评论对象
			var comment = {
				commentId : null,
				commentContent : reply_text,
				commentTime : nowTime,
				account : loginAccount,
				songId : songId
			}
			//通过ajax传到后台，将存储到数据库
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/CommentServlet",
				type:"post",
				data:{op:"addComment",comment:JSON.stringify(comment)},
				dataType:"text",
				success:function(result,status,xhr){
						if ("yes"==result) {
							alert("评论成功");
						}else {
							alert("评论失败");
						}
						$("#reply_text").text("");
						//发送完评论更新评论列表
						sendAjax(1);
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
		}
	})
	//时分秒<10判断
	function timeChange(param) {
		if (param<10) {
			param = "0"+param;
		}else {
			param = param;
		}
		return param;
	}
	
	//关注用户按钮
	$(document).on("click",".attentioinAccount",function(){
		var beFansId = $(this).prev().prev().val();//被粉账户的id
		//粉人的就是当前登录的用户，即从session中取得id
		if (beFansId==accountId) {
			alert("请勿关注自己")
		} else {
			//先判断是否关注过
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/FansServlet",
				type:"post",
				data:{op:"existFans",fansId:accountId,beFansId:beFansId},
				dataType:"text",
				success:function(result,status,xhr){
						//未粉过，调用增加粉功能
						if ("noFans"==result) {
							$.ajax({
								async:true,
								url:"${pageContext.request.contextPath}/FansServlet",
								type:"post",
								data:{op:"addFans",fansId:accountId,beFansId:beFansId},
								dataType:"text",
								success:function(result,status,xhr){
										if ("success"==result) {
											alert("关注成功");
											
										
										} else {
											alert("关注失败")
										}
									},
									error:function(xhr,status,error){
										alert("ajax异步请求失败1");
									}
								});
						} else if("yesFans"==result) {
							//粉过，取消
							$.ajax({
								async:true,
								url:"${pageContext.request.contextPath}/FansServlet",
								type:"post",
								data:{op:"deleteFans",fansId:accountId,beFansId:beFansId},
								dataType:"text",
								success:function(result,status,xhr){
										if ("success"==result) {
											alert("取消关注成功")
										} else {
											alert("取消关注失败")
										}
									},
									error:function(xhr,status,error){
										alert("ajax异步请求失败2");
									}
								});
						}
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败3");
					}
				});
		}
	
	})
	
	
	//歌词
	var lrc = "";
	            function getLRC(lrc) {
	                var ajax = new XMLHttpRequest();
	                ajax.open("GET", "${pageContext.request.contextPath}/FileDownloadServlet?fileName=lrc/"+lrc);
	                ajax.onreadystatechange = function () {
	       
	                    // 判断响应是否完成：XMLHttpRequest 对象的 readystate属性值为4的时候
	                     if ( ajax.readyState === 4 ) {
	                         //再判断是否可用 ：XMLHttpRequest 对象的 status 属性为值 200
	                        if ( ajax.status === 200 ) {
	                            lrc = ajax.responseText;
	                            createLrcObj(lrc);
	                        } else {
	                           document.getElementById("lrclist").innerHTML = "<li class='on'><p>"+"暂无歌词"+"</p></li>";
	                        }
	                    }
	                };
	                ajax.send(null);
	            }
	            var oLRC = {
	                ti: "", //歌曲名
	                ar: "", //演唱者
	                al: "", //专辑名
	                by: "", //歌词制作人
	                offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
	                ms: [] //歌词数组{t:时间,c:歌词}
	            };
	            function createLrcObj(lrc) {
	                if (lrc.length === 0) return;
	                var lrcs = lrc.split('\n');//用回车拆分成数组
	                for (var i in lrcs) {//遍历歌词数组
	                    if (lrcs.hasOwnProperty(i)) {
	                        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
	                        var t_lrc = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
	                        var s_text = t_lrc.split(":");//分离:号前后的文字
	                        if (isNaN(parseInt(s_text[0]))) { //不是数值，基本上是歌曲名、作者等信息
	                            for (var j in oLRC) {
	                                if (j !== "ms" && j === s_text[0].toLowerCase()) {
	                                    oLRC[j] = s_text[1];
	                                }
	                            }
	                        } else { //是数值，基本上就是歌词时间点
	                            var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
	                            var start = 0;
	                            for (var lrc_position in arr) {
	                                if (arr.hasOwnProperty(lrc_position)) {
	                                    start += arr[lrc_position].length; //计算歌词位置
	                                }
	                            }
	                            var content = lrcs[i].substring(start);//获取歌词内容
	                            for (var k in arr) {
	                                if (arr.hasOwnProperty(k)) {
	                                    var t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
	                                    var s = t.split(":");//分离:前后文字
	                                    oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
	                                        t: parseFloat(s[0].substr(0,2)) * 60 + parseFloat(s[1].substring(0,6)),//注意转换成number格式
	                                        // t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
	                                        c: content
	                                    });
	                                }
	                            }
	                        }
	                    }
	                }
	                oLRC.ms.sort(function (a, b) {//按时间顺序排序
	                    return a.t - b.t;
	                });
	                // var lrc_result = "";
	                var lrcTime = [];//歌词对应的时间数组
			        var ul = $("#lrclist")[0];//获取ul
	                for (var n in oLRC.ms) {//遍历ms数组，把歌词加入列表
	                    // lrc_result += '<li>' + oLRC.ms[n].c + '</li>';
	                    // document.getElementById("lyric").innerHTML = lrc_result;
	                    ul.innerHTML += "<li><p>"+oLRC.ms[n].c+"</p></li>"; //ul里填充歌词
	                }
	            }
	                 
</script> 

</html>
